<template>
  <div class="timing2" style="padding:20px 10px;">
    <el-row style="margin-bottom:10px;">
        <el-col :span="24">
            <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新增</el-button>
        </el-col>
      </el-row>
      <div class="timing">
    <div  style="width:40%;border-right:2px solid #f2f5f8;">
        <el-tree
        :data="tableUserData"
        @node-click="nodeclick"
        node-key="id"
        :props="defaultProps">
      </el-tree>
    </div>
    <div style="width:40%;">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="ruleForm.deptName" />
        </el-form-item>
        <el-form-item label="上级部门" prop="leader">
          <el-row>
            <el-col :span="22">
              <el-input v-model="deptName_" disabled/>
            </el-col>
            <el-col :span="2">
              <el-button style="margin-left:10px;" type="primary" icon="el-icon-zoom-in" circle @click="btn_clickSelect" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="部门负责人" prop="leader">
          <el-input v-model="ruleForm.leader" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="ruleForm.sort" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="ruleForm.id=='1'" @click="submitForm('ruleForm')">修改</el-button>
          <el-button :disabled="ruleForm.id=='1'" @click="resetForm('ruleForm')">重置</el-button>
          <el-popconfirm title="确定删除吗？" icon-color="#f00" @confirm="deleteSelectData">
            <el-button slot="reference" :disabled="ruleForm.id=='1'" style="padding: 9px 15px;margin-left: 10px;" size="mini">删除</el-button>
          </el-popconfirm>
        </el-form-item>
      </el-form>
    </div>
  </div>
    <editdialog :tableUserData="tableUserData" ref="editdialog" @refresh="getUserList" /> 
    <el-dialog :close-on-click-modal="false" title="上级部门" width="30%" :visible.sync="selectModelShow">
      <el-tree
        ref="elTree"
        :data="tableUserData"
        @node-click="checkchange"
        node-key="id"
        :props="defaultProps">
      </el-tree>
     <div style="text-align: right;margin: 20px 0;">
      <el-button type="primary" @click="selectProDept">确定</el-button>
     </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserRoles, userRoleAddEdit, getDeptList,delDept } from '@/api/home_'
import editdialog from './components/editDialog2.vue'
import { saveDept } from '@/api/home_'
export default {
  components: {
    editdialog
  },
  // primary  success info warning danger
  data() {
    return {
      deptName_:"",
      depId:"",
      selectModelShow:false,
      ruleForm:{},
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      formInline: {
        name: '',
        phone: ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'deptName',
          title: '部门名称'
        },
        {
          key: 'leader',
          title: '部门负责人'
        },
        {
          key: 'createTime',
          title: '创建时间'
        }, {
          key: 'parentId',
          title: '上级部门ID'
        },
        {
          key: 'status',
          title: '状态 '
        },
        {
          key: 'remark',
          title: '备注信息'
        }
      ],
      visible: false,
      total: 0,
      size: 10,
      page: 1
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    getDepName(list,id){
      if(list.length>0){
        list.forEach((item,index)=>{
          if(item.id==id){
            this.deptName_ =item.deptName
          }else if(item.children.length>0){
            this.getDepName(item.children,id)
          }else{
            if(item.id==id){
              this.deptName_ =item.deptName
            }
          }
        })
      }
    },
    nodeclick(v){
      v.status += ''
      this.depId = v.id
      if(v.parentId=='0'){
        this.deptName_ = '无'
      }else{
        this.getDepName(this.tableUserData,v.parentId)
      }
      this.ruleForm = JSON.parse(JSON.stringify(v))
    },
    checkchange(v){
      this.deptName_ = v.deptName
      this.$message.success('已选“'+v.deptName+'”部门')
      this.ruleForm.parentId = v.id 
    },
    selectProDept(){
      this.selectModelShow = false
    },
       // 选择父级
    btn_clickSelect() {
      this.selectModelShow = true
    },
    resetForm(formName) {
      this.deptName_ = ""
      this.ruleForm = {}
    },
    submitForm(formName) {
      this.ruleForm.id = this.ruleForm.id||this.depId
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveDept(this.ruleForm).then(res => {
            if(res.code==200){
              this.$message.success(res.msg)
              this.dialogTableVisible = false
              this.resetForm()
              this.getUserList()
              this.deptName_ = ""
            }else{
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    deleteSelectData() {
      delDept({ dept_id: this.ruleForm.id }).then(res => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          this.getUserList()
          this.deptName_ = ""
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    roleDist(v) {

    },
    addUser(v) {
      this.$refs.editdialog.setVal(v)
    },
    editRowData(v) {
      this.$refs.editdialog.setVal(v)
    },
    handleSizeChange(v) {
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      getDeptList().then(res => {
        this.tableUserData = res.data
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .timing{
    border: 1px solid #eee;
    padding: 10px 0;
    border-radius: 2px;
    background:#fff;
    display: flex;
    flex-direction: row;
  }
  // >>>.el-tree-node.is-current.is-focusable {
  //   background: #9fbfdb !important;
  // }
</style>
